<template>
  <section class="m-goods-common m-ct-bg">
    <header>
      <span>商品综合满意度</span>
      <strong>{{totalCommon}}分</strong>
    </header>
    <div class="u-min-gap"></div>
    <div class="all-tit" v-if="commonList.length">全部评价</div>
    <w-empty v-if="!commonList.length"></w-empty>
    <yd-infinitescroll class="m-collect-shoplist" :callback="loadList" ref="infiniteScroll" v-else>
      <div slot="list">
        <div class="common-box">
          <common-item v-for="(common, index) in commonList" :key="index" :common="common"></common-item>
        </div>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <p slot="loadingTip">加载中...</p>
    </yd-infinitescroll>
  </section>
</template>

<script>
  import CommonItem from './commonItem'
  import { apiGoodsCommon } from 'js/api'

  export default {
    props: {
      goodsId: [String]
    },
    data() {
      return {
        curPage: 1,
        commonList: [],
        totalCommon: ''
      }
    },
    created() {
      this.fetchCommonList()
    },
    methods: {
      fetchCommonList() {
        apiGoodsCommon(this.goodsId, this.curPage).then(data => {
          const oData = data || {}
          this.totalCommon = oData.goodPercent || 0
          this.commonList = this.commonList.concat(oData.evaluateList)
          if (this.curPage >= oData.totalPageCount) {
            this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.finishLoad')
          this.curPage++
        })
      },
      loadList() {
        this.fetchCommonList()
      }
    },
    components: {
      CommonItem
    }
  }
</script>

<style lang="scss" scoped>
  header {
    height: .8rem;
    padding: 0 .3rem;
    line-height: .8rem;
    strong {
      padding-left: .2rem;
      color: #f00385;
    }
  }
  .all-tit {
    padding: 0 .3rem;
    line-height: .6rem;
    border-bottom: 1px solid #eee;
    color: #999;
  }
  .common-box {
    padding: 0 .3rem;
  }
</style>